import React from 'react'

export default class SetState extends React.Component {
    state = { count: 0 }
    increment = () => {
        console.log('increment setState前的count', this.state.count)
        this.setState({
            count: this.state.count + 1
        }, () => {
            console.log('increment setState后的count', this.state.count)
        })

    }
    triple = () => {
        console.log('100次循环 setState前的count', this.state.count)
        for (let i = 0; i < 10000000; i++) {
            this.setState({
                count: this.state.count + 1
            });
        }
        console.log('100次循环 setState后的count', this.state.count)
    }
    reduce = () => {
        setTimeout(() => {
            console.log('reduce setState前的count', this.state.count)
            this.setState({
                count: this.state.count + 1
            });
            this.setState({
                count: this.state.count + 1
            });
            this.setState({
                count: this.state.count + 1
            });
            console.log('reduce setState后的count', this.state.count)

        }, 0)
    }
    render() {
        return <div>
            <button onClick={this.increment}>点我增加1</button>
            <button onClick={this.triple}>循环10000000次</button>
            <button onClick={this.reduce}>settimeout内 三次</button>
        </div>
    }
}